<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>hello world</title>
		<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/artTemplate.js"></script>
		<script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>
		<style>
			#page1 .ui-content{
				padding: 0;
			}
			#page1 .ui-content .ui-listview{
				margin: 0;
			}
			
			#page2 .ui-content .ui-listview a {
				padding: 0 40px 0 50px;
			}
			
			#page2 .ui-content .ui-listview img {
				position: absolute;
				top: 10px;
				left: 0;
			}
		</style>
	</head>

	<body>
		<!--周免英雄-->
		<div data-role="page" id="page1">
			<div data-role="header">
				<a href="#" class="ui-btn ui-icon-carat-l ui-btn-icon-left ui-btn-icon-notext ui-btn-corner-all"></a>
				<h2>周免英雄</h2>
				<a href="#page2" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-btn-icon-notext ui-btn-corner-all" data-transition = "slide"></a>
				<div data-role="navbar">
					<ul>
						<li><a href="#">周免英雄</a></li>
						<li><a href="#page2" data-transition = "slide">我的英雄</a></li>
						<li><a href="#">全部英雄</a></li>
					</ul>
				</div>
				<!-- /navbar -->
			</div>
			<div data-role="main" class="ui-content">
				<div class="ui-grid-a">
					<div class="ui-block-a">
						<ul data-role="listview"></ul>
					</div>
					<div class="ui-block-b">
						<ul data-role="listview"></ul>
					</div>
				</div>
				<!-- /grid-a -->
			</div>
		</div>
		
		<!--我的英雄-->
		<div data-role="page" id="page2" >
			<div data-role="header" data-position = "fixed">
				<a href="#page1" class="ui-btn ui-icon-carat-l ui-btn-icon-left ui-btn-icon-notext ui-btn-corner-all" data-transition = "slide" data-direction = "reverse"></a>
				<h2>我的英雄</h2>
				<a href="#" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-btn-icon-notext ui-btn-corner-all"></a>
				<div data-role="navbar">
					<ul>
						<li><a href="#page1" data-transition = "slide" data-direction = "reverse">周免英雄</a></li>
						<li><a href="#">我的英雄</a></li>
						<li><a href="#">全部英雄</a></li>
					</ul>
				</div>
				<!-- /navbar -->
				<form>
					<input id="myHeroSearch" data-type = "search" placeholder="搜索英雄"/>
				</form>
			</div>
			<div data-role="main" class="ui-content" id="myHeroMain">
			</div>
		</div>
		
		<!--数据类型模板-->
		<script type="text/html" id="firstTemp">
			<li data-icon="false">
				<a href="#">
					<img src="freeIcons/{{icon}}">
					<h2>{{title}}</h2>
					<p>{{name}}</p>
				</a>
			</li>
		</script>
		<script type="text/html" id="secondTemp">
			<li data-icon="false">
				<a href="#">
					<img src="icons/{{icon}}">
					<h2>{{name}}</h2>
					<p>{{intro}}</p>
				</a>
			</li>
		</script>
		<script>
			$.ajax({
				type: "get",
				url: "json/free.json",
				async: true,
				dataType: "json",
				success: function(data) {
					$.each(data, function(i, val) {
						var $li = $(template('firstTemp', val));
						if (i % 2 == 0) {
							$li.appendTo($(".ui-block-a ul"));
						} else {
							$li.appendTo($(".ui-block-b ul"));
						}
					});
					//				refresh刷新样式
					$(".ui-block-a ul").listview("refresh");
					$(".ui-block-b ul").listview("refresh");
				},
				error: function(){
					alert("服务器错误");
				}
			});
			
//			同时请求数据是为了渲染到页面上时数据还没有请求到
			$.ajax({
				type:"get",
				url:"json/heros.json",
				async:true,
				dataType: "json",
				success: function (datas) {
					var $ul = $('<ul data-role="listview" data-filter="true" data-input="#myHeroSearch"></ul>');
					$.each(datas, function(i,vals) {
						$(template("secondTemp",vals)).appendTo($ul);
					});
					$ul.appendTo($("#myHeroMain"));
					$ul.listview("refresh");
				},
				error: function () {
					alert("服务器请求错误");
				}
			});
			
//			一直高亮显示的事件
			$(document).on("pagebeforeshow","#page1",function () {
				$("#page1 .ui-header .ui-navbar a:eq(0)").addClass("ui-btn-active");
			});
			$(document).on("pagebeforeshow","#page2",function () {
				$("#page2 .ui-header .ui-navbar a:eq(1)").addClass("ui-btn-active");
			});
		</script>
		
	</body>

</html>